<script setup>

import { onMounted,ref } from 'vue';
import * as echarts from 'echarts';   //第一步引入
var main = ref(null)
  // 第二步初始化echarts
  // 基于准备好的dom，初始化echarts实例
  onMounted(()=>{
    draw()
  })
  const draw=()=>{
    var myChart = echarts.init(main.value);
    console.log('myChart',myChart);
    // 第四步
    myChart.setOption(options)
  }
  //第三步  指定图表的数据以及配置项
  var options = {
    tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ],
  backgroundColor:'#fff'
}
</script>

<template>
  <div>
    <div ref="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<style scoped>

</style>
